<%--
  Created by IntelliJ IDEA.
  User: 张乔
  Date: 2024/6/10
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<style>
    .tools-div {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ebeef5;
        border-radius: 3px;
        background-color: #fff;
    }


</style>
<head>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>管理</title>
</head>
<body>
<div id="appp">
    <el-dialog  :visible.sync="dialogVisible" title="添加或修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="部门名称">
                <el-input v-model="deploymentsInfo.departmentName"></el-input>
            </el-form-item>
            <el-form-item label="部门描述">
                <el-input  v-model="deploymentsInfo.description"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

   <el-button type="primary" @click="addShow">新增</el-button>

    <el-table :data="list" style="width: 100%">
        <el-table-column prop="departmentName" label="部门名称"></el-table-column>
        <el-table-column prop="description" label="部门描述"  width="180"></el-table-column>

        <el-table-column label="操作" align="center" width="280" #default="scope">
            <el-button type="primary" size="small" @click="editSysUser(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small"  @click="deleteByIdFun(scope.row)" >
                删除
            </el-button>

        </el-table-column>
    </el-table>

    <el-pagination
            v-model:current-page="pageParams.page"
            v-model:page-size="pageParams.limit"
            :page-sizes="[3,5,10, 20, 50, 100]"
            @size-change="SizeChange"
            @current-change="CurrentChange"
            layout="total, sizes, prev, pager, next"
            :total="total">
        <!---分页-->
    </el-pagination>








</div>
<!-- 引入axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#appp',
        data: {
            list: [],
            // pageParams: {
            //     page: 1,
            //     limit: 3
            // },
            pageParamsForm: {
                page: 1, // 页码
                limit: 10, // 每页记录数
            },
            pageParams: null,
            total: 0,
            dialogVisible: false,
            deploymentsInfo: {
                departmentId: 0,
                description: '',
                departmentName: '',
            }


        },
        methods: {
         //  页面变化
            SizeChange(val) {
        this.pageParamsForm.limit = val;
        this.getList();

            },
            // 当前页变化
            CurrentChange(val) {
                this.pageParamsForm.page = val;
                this.getList();

            },

         async getList  () {
        let {data}=   await axios.get('http://localhost:8080/departments/getPage/'+this.pageParams.page+"/"+this.pageParams.limit)
                 console.log(data);
        this.list = data.list;
        this.total = data.total;

            },
            // 添加
            addShow() {
                this.employeesInfo={
                    departmentId: null,
                    description: '',
                    departmentName: '',
                }
                this.dialogVisible = true;

            },
            async submit () {
                if(!this.deploymentsInfo.departmentId) {
                    const {data} = await axios.post('http://localhost:8080/departments/add', this.deploymentsInfo)

                    this.dialogVisible = false
                alert('操作成功')
                    await this.getList()
                }
                else {
                    const { data} = await axios.put('http://localhost:8080/departments/update',this.deploymentsInfo)

                        this.dialogVisible= false
                    alert('操作成功')
                        await this.getList()

                }

            },
            // 修改
            async editSysUser(row) {
                console.log(row)
                    this.dialogVisible = true
                    this.deploymentsInfo = {...row}


            },
           async deleteByIdFun (row) {

                  await axios.delete('http://localhost:8080/departments/deleteById/'+row.departmentId)

               alert('操作成功')
                        await this.getList()


            }


        },
        mounted() {
            this.getList();
        },
        created() {
            this.pageParams = this.$data.pageParamsForm;
        }
    })


</script>
</body>
</html>
